<template>
    <WidgetContainer :widget-id="config.id">
        <FormItemWidget :config="config" :rowIndex="rowIndex" :parentId="parentId">
            <el-checkbox-group :class="config.attributes?.cssClass" v-model="fieldValue" :disabled="config.attributes.disabled"
                :size="config.attributes.size" :style="{ width: config.attributes.width }" @change="handleChange">
                <el-checkbox v-for="option in config.options" :key="option.value" :label="option.label"
                    :value="option.value" />
            </el-checkbox-group>
        </FormItemWidget>
    </WidgetContainer>
</template>

<script setup>
import { ElCheckbox, ElCheckboxGroup } from 'element-plus';
import { inject, onMounted } from 'vue';
import { executeEventHandler } from '@/utils/eventExecutor'
import { useFieldBinding } from '@/utils/useFieldBinding'
import { getDict } from '@/api/getDict';

const formData = inject('formData')
const widgetList = inject('widgetList')

const props = defineProps({
    config: Object,
    rowIndex: Number,
    parentId: String
})

const { fieldValue } = useFieldBinding(formData, props.config, {
    rowIndex: props.rowIndex,
    parentId: props.parentId
})

onMounted(() => {
    executeEventHandler(props.config.events?.onMounted,
        { widgetConfig: props.config, formData: formData.value, widgetList: widgetList.value }
    )
    // 获取字典值
    getDict(props.config)
})

const handleChange = (value) => {
    executeEventHandler(props.config.events?.onChange,
        { widgetConfig: props.config, formData: formData.value, widgetList: widgetList.value, value }
    )
}
</script>

<style scoped>
.el-checkbox-group {
    width: 100%;
}
</style>